<template>
  <div class="app-container">

    <div class="filter-container">
      <el-row>
        <el-input
          v-model="listQuery.hostUnitName"
          placeholder="牵头单位"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.nodetype" clearable placeholder="请选择事项类型" class="filter-item">
          <el-option
            v-for="item in nodeType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @keyup.enter.native="handleFilter"/>
        </el-select>
        <el-date-picker
          v-model="listQuery.start"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
          class="filter-item"/>
        <el-date-picker
          v-model="listQuery.end"
          type="date"
          placeholder="选择结束日期"
          value-format="yyyy-MM-dd"
          class="filter-item" />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button v-waves class="filter-item" type="default" icon="el-icon-refresh" @click="tableReset()">刷新</el-button>
      </el-row>
    </div>
    <div class="filter-container">
      <!-- <el-button v-permission="'node-unit-statistical-export'" v-waves type="success" @click="exportNode()"><svg-icon icon-class="download"/> 导出事项</el-button> -->
      <el-button v-permission="'node-unit-statistical-export'" v-waves type="success" @click="exportNode()"><svg-icon icon-class="download"/> 导出事项</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="listQuery.list"
      fit
      border
      stripe
      show-summary
      highlight-current-row
      style="width: 100%;">
      <!-- <el-table-column type="selection" width="55"/> -->
      <!-- <el-table-column type="index" align="center" /> -->
      <el-table-column fixed type="index" width="80px" align="center" />
      <el-table-column fixed label="单位名称" align="center" width="180px" prop="unitName"/>
      <el-table-column fixed label="待收事项" align="center" width="170px" prop="ds" />
      <el-table-column fixed label="按期进行" align="center" width="110px" prop="zzjx" />
      <el-table-column label="漏报数量" align="center" min-width="80px" prop="misnumber"/>
      <el-table-column label="按期完成" align="center" min-width="80px" prop="aqwc"/>
      <el-table-column label="逾期进行" align="center" min-width="80px" prop="yqwc"/>
    </el-table>
    <pagination
      v-show="listQuery.total>0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.rows"
      @pagination="getList" />
  </div>
</template>

<script>
import node from '@/api/node-manage/statistical'
import { getNodeTypeTree } from '@/api/systemManage/nodeType'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DelBoxMixin from '@/mixins/delBox'
// import nodeApi from '@/api/node-manage/node'
// import { mapGetters } from 'vuex'
// import { getLeader } from '@/api/systemManage/user'
// import { getNodeTypeTree } from '@/api/systemManage/nodeType'

export default {
  // name: 'FpInfoStatistical',
  components: { Pagination },
  directives: { waves },
  mixins: [DelBoxMixin],
  data() {
    return {
      listLoading: true,
      formLabelWidth: '150px',
      listQuery: {},
      selQuery: { page: 1, rows: 1000, total: 0, type: 0, schoolName: null },
      selList: [],
      nodeType: []
    }
  },
  computed: {
  },
  created() {
    this.tableReset()
  },
  methods: {
    tableReset() {
      this.listQuery = {
        page: 1,
        rows: 10,
        total: 0,
        list: null
      }
      this.getList()
      this.getNodeType()
    },
    getList() {
      this.listLoading = true
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list
      node.getNodeStatisticalPages(params).then(response => {
        this.listQuery.list = response.data
        this.listLoading = false
      }).catch(e => {
        this.listLoading = false
        this.$message.error(e.message)
      })
    },
    getNodeType() {
      getNodeTypeTree().then(resp => {
        this.nodeType = resp.data
      }).catch(resp => {
        this.$message.error(resp.message)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    exportNode() {
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list
      node.exportNodeStatisticalPages(params).then(res => {
        if (!res) {
          return
        }
        var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
        var url = window.URL.createObjectURL(blob)
        var aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.download = '督查事项.xlsx'
        aLink.href = url
        document.body.appendChild(aLink)
        aLink.click()
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .audit-drawer-content {
    width: 90%;
    text-align: center;
    align-items: center;
  }
</style>
